<template>
  <div class="resource-capability-guide">
    <div class="guide-header">
      <h2>资源能力使用指南</h2>
      <p class="guide-subtitle">
        RBO (Resource Behavior Orchestrator) 系统使用指南
      </p>
    </div>

    <div class="guide-content">
      <!-- 快速导航 -->
      <div class="quick-nav">
        <h3>快速导航</h3>
        <div class="nav-links">
          <a @click="scrollToSection('overview')" class="nav-link">系统概述</a>
          <a @click="scrollToSection('concepts')" class="nav-link">核心概念</a>
          <a @click="scrollToSection('getting-started')" class="nav-link"
            >快速开始</a
          >
          <a @click="scrollToSection('capabilities')" class="nav-link"
            >能力管理</a
          >
          <a @click="scrollToSection('workflows')" class="nav-link"
            >工作流设计</a
          >
          <a @click="scrollToSection('rules')" class="nav-link">规则引擎</a>
          <a @click="scrollToSection('monitoring')" class="nav-link"
            >性能监控</a
          >
          <a @click="scrollToSection('best-practices')" class="nav-link"
            >最佳实践</a
          >
        </div>
      </div>

      <!-- 系统概述 -->
      <section id="overview" class="guide-section">
        <h3>系统概述</h3>
        <div class="section-content">
          <p>
            RBO (Resource Behavior Orchestrator)
            是一个强大的资源行为编排系统，旨在统一管理和编排各种资源的业务行为。
            通过抽象化的行为定义、状态机管理和事件驱动架构，RBO
            提供了灵活、可扩展的资源能力管理解决方案。
          </p>

          <div class="feature-grid">
            <div class="feature-card">
              <IconifyIcon
                icon="ant-design:branches-outlined"
                class="feature-icon"
              />
              <h4>行为编排</h4>
              <p>统一的行为定义和执行机制，支持多种实现方式</p>
            </div>
            <div class="feature-card">
              <IconifyIcon
                icon="ant-design:setting-outlined"
                class="feature-icon"
              />
              <h4>状态管理</h4>
              <p>基于状态机的资源状态管理，确保状态转换的一致性</p>
            </div>
            <div class="feature-card">
              <IconifyIcon
                icon="ant-design:notification-outlined"
                class="feature-icon"
              />
              <h4>事件驱动</h4>
              <p>事件发布和订阅机制，支持松耦合的系统集成</p>
            </div>
            <div class="feature-card">
              <IconifyIcon
                icon="ant-design:dashboard-outlined"
                class="feature-icon"
              />
              <h4>性能监控</h4>
              <p>实时性能监控和缓存管理，确保系统高效运行</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 核心概念 -->
      <section id="concepts" class="guide-section">
        <h3>核心概念</h3>
        <div class="section-content">
          <div class="concept-list">
            <div class="concept-item">
              <h4>资源 (Resource)</h4>
              <p>
                系统中的核心实体，如房间、设备、服务等。每个资源都有属性、状态和行为。
              </p>
              <div class="code-example">
                <pre><code>{
  "id": "room_001",
  "type": "room",
  "state": "idle",
  "attributes": {
    "capacity": 2,
    "floor": 3,
    "price": 299
  }
}</code></pre>
              </div>
            </div>

            <div class="concept-item">
              <h4>行为 (Behavior)</h4>
              <p>
                资源可以执行的操作，如预订、入住、退房等。每个行为都有输入输出定义和实现方式。
              </p>
              <div class="code-example">
                <pre><code>{
  "name": "reserve_room",
  "inputSchema": {
    "guestId": "string",
    "checkInDate": "date";,
    "checkOutDate": "date"
  },
  "impl": {
    "type": "api",
    "ref": "/api/booking/reserve"
  }
}</code></pre>
              </div>
            </div>

            <div class="concept-item">
              <h4>状态机 (State Machine)</h4>
              <p>定义资源状态的转换规则，确保状态变更的合法性和一致性。</p>
              <div class="code-example">
                <pre><code>{
  "states": ["idle", "reserved", "occupied", "cleaning"],
  "transitions": [
    {"from": "idle", "to": "reserved", "by": "reserve"},
    {"from": "reserved", "to": "occupied", "by": "checkin"},
    {"from": "occupied", "to": "cleaning", "by": "checkout"}
  ]
}</code></pre>
              </div>
            </div>

            <div class="concept-item">
              <h4>事件 (Event)</h4>
              <p>
                系统中发生的重要事情，如房间预订成功、状态变更等。支持事件发布和订阅。
              </p>
              <div class="code-example">
                <pre><code>{
  "name": "RoomReserved",
  "payload": {
    "roomId": "room_001",
    "guestId": "guest_123";,
    "reservationId": "res_456"
  }
}</code></pre>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 快速开始 -->
      <section id="getting-started" class="guide-section">
        <h3>快速开始</h3>
        <div class="section-content">
          <div class="step-list">
            <div class="step-item">
              <div class="step-number">1</div>
              <div class="step-content">
                <h4>配置资源能力</h4>
                <p>在资源管理页面，选择要配置的资源，点击"能力管理"按钮。</p>
                <div class="step-image">
                  <div class="step-placeholder">
                    <IconifyIcon icon="ant-design:setting-outlined" />
                    <p>配置资源能力界面</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="step-item">
              <div class="step-number">2</div>
              <div class="step-content">
                <h4>添加能力模板</h4>
                <p>从能力模板库中选择合适的能力模板，或创建自定义能力。</p>
                <div class="step-image">
                  <div class="step-placeholder">
                    <IconifyIcon icon="ant-design:plus-outlined" />
                    <p>添加能力模板界面</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="step-item">
              <div class="step-number">3</div>
              <div class="step-content">
                <h4>配置实现方式</h4>
                <p>为每个能力配置具体的实现方式，如API调用、工作流、规则等。</p>
                <div class="step-image">
                  <div class="step-placeholder">
                    <IconifyIcon icon="ant-design:api-outlined" />
                    <p>配置实现方式界面</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="step-item">
              <div class="step-number">4</div>
              <div class="step-content">
                <h4>设置前置约束</h4>
                <p>配置能力执行的前置条件，如状态检查、权限验证等。</p>
                <div class="step-image">
                  <div class="step-placeholder">
                    <IconifyIcon icon="ant-design:check-circle-outlined" />
                    <p>设置前置约束界面</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="step-item">
              <div class="step-number">5</div>
              <div class="step-content">
                <h4>测试和部署</h4>
                <p>测试能力配置，确保功能正常，然后部署到生产环境。</p>
                <div class="step-image">
                  <div class="step-placeholder">
                    <IconifyIcon icon="ant-design:rocket-outlined" />
                    <p>测试和部署界面</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 能力管理 -->
      <section id="capabilities" class="guide-section">
        <h3>能力管理</h3>
        <div class="section-content">
          <h4>能力类型</h4>
          <div class="capability-types">
            <div class="type-card">
              <h5>业务能力</h5>
              <p>与业务逻辑相关的能力，如预订管理、入住管理等。</p>
              <ul>
                <li>预订管理</li>
                <li>入住管理</li>
                <li>退房管理</li>
                <li>房间清洁</li>
              </ul>
            </div>
            <div class="type-card">
              <h5>技术能力</h5>
              <p>与系统集成和技术实现相关的能力。</p>
              <ul>
                <li>数据同步</li>
                <li>消息推送</li>
                <li>文件处理</li>
                <li>外部API调用</li>
              </ul>
            </div>
          </div>

          <h4>实现方式</h4>
          <div class="implementation-methods">
            <div class="method-card">
              <h5>API调用</h5>
              <p>通过HTTP API调用外部服务</p>
              <div class="code-example">
                <pre><code>{
  "type": "api",
  "url": "/api/booking/reserve";,
  "method": "POST";,
  "timeout": 30
}</code></pre>
              </div>
            </div>
            <div class="method-card">
              <h5>工作流</h5>
              <p>通过BPM工作流引擎执行复杂流程</p>
              <div class="code-example">
                <pre><code>{
  "type": "bpm",
  "processKey": "room_reservation_process",
  "variables": {
    "roomId": "${roomId}",
    "guestId": "${guestId}"
  }
}</code></pre>
              </div>
            </div>
            <div class="method-card">
              <h5>规则引擎</h5>
              <p>通过规则引擎执行业务规则</p>
              <div class="code-example">
                <pre><code>{
  "type": "rule",
  "ruleSet": "booking_rules",
  "facts": {
    "room": "${room}",
    "guest": "${guest}"
  }
}</code></pre>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 工作流设计 -->
      <section id="workflows" class="guide-section">
        <h3>工作流设计</h3>
        <div class="section-content">
          <p>
            工作流设计器提供了可视化的流程设计工具，支持拖拽式节点创建和连接。
          </p>

          <h4>节点类型</h4>
          <div class="node-types">
            <div class="node-type">
              <h5>行为节点</h5>
              <ul>
                <li><strong>行为执行</strong>：执行预定义的行为</li>
                <li><strong>服务调用</strong>：调用外部服务</li>
                <li><strong>子工作流</strong>：调用其他工作流</li>
              </ul>
            </div>
            <div class="node-type">
              <h5>控制节点</h5>
              <ul>
                <li><strong>条件判断</strong>：根据条件分支执行</li>
                <li><strong>并行执行</strong>：同时执行多个分支</li>
                <li><strong>循环执行</strong>：重复执行某些操作</li>
              </ul>
            </div>
            <div class="node-type">
              <h5>事件节点</h5>
              <ul>
                <li><strong>事件发布</strong>：发布事件到事件总线</li>
                <li><strong>事件监听</strong>：监听特定事件</li>
              </ul>
            </div>
          </div>

          <h4>设计步骤</h4>
          <ol class="workflow-steps">
            <li>从左侧工具栏拖拽节点到画布</li>
            <li>配置节点的属性和参数</li>
            <li>连接节点，定义执行流程</li>
            <li>测试工作流逻辑</li>
            <li>保存和部署工作流</li>
          </ol>
        </div>
      </section>

      <!-- 规则引擎 -->
      <section id="rules" class="guide-section">
        <h3>规则引擎</h3>
        <div class="section-content">
          <p>
            规则引擎支持复杂的业务规则配置，可以根据条件自动执行相应的动作。
          </p>

          <h4>规则类型</h4>
          <div class="rule-types">
            <div class="rule-type">
              <h5>条件规则</h5>
              <p>根据条件判断是否执行动作</p>
              <div class="code-example">
                <pre><code>IF room.state == "idle" AND user.hasPermission("reserve")
THEN execute("reserve_room")</code></pre>
              </div>
            </div>
            <div class="rule-type">
              <h5>动作规则</h5>
              <p>直接执行指定的动作</p>
              <div class="code-example">
                <pre><code>ON room.checkout
DO sendNotification("housekeeping")</code></pre>
              </div>
            </div>
            <div class="rule-type">
              <h5>验证规则</h5>
              <p>验证数据或操作的合法性</p>
              <div class="code-example">
                <pre><code>VALIDATE booking.dates
CHECK checkInDate < checkOutDate</code></pre>
              </div>
            </div>
          </div>

          <h4>规则配置</h4>
          <div class="rule-config">
            <h5>条件配置</h5>
            <ul>
              <li><strong>字段选择</strong>：选择要判断的字段</li>
              <li>
                <strong>操作符</strong>：选择比较操作符（等于、大于、包含等）
              </li>
              <li><strong>值设置</strong>：设置比较的值</li>
              <li>
                <strong>逻辑连接</strong>：设置多个条件的逻辑关系（AND/OR）
              </li>
            </ul>

            <h5>动作配置</h5>
            <ul>
              <li>
                <strong>动作类型</strong
                >：设置字段、调用服务、发送事件、执行行为
              </li>
              <li><strong>目标设置</strong>：指定动作的目标对象</li>
              <li><strong>参数配置</strong>：设置动作执行所需的参数</li>
            </ul>
          </div>
        </div>
      </section>

      <!-- 性能监控 -->
      <section id="monitoring" class="guide-section">
        <h3>性能监控</h3>
        <div class="section-content">
          <p>
            性能监控提供了系统运行状态的实时监控，帮助识别性能瓶颈和优化机会。
          </p>

          <h4>监控指标</h4>
          <div class="monitoring-metrics">
            <div class="metric-item">
              <h5>API响应时间</h5>
              <p>监控API调用的响应时间，识别慢查询</p>
              <ul>
                <li>绿色：&lt; 100ms（良好）</li>
                <li>黄色：100-200ms（警告）</li>
                <li>红色：&gt; 200ms（异常）</li>
              </ul>
            </div>
            <div class="metric-item">
              <h5>缓存命中率</h5>
              <p>监控缓存的使用效率</p>
              <ul>
                <li>绿色：&gt; 90%（优秀）</li>
                <li>黄色：70-90%（良好）</li>
                <li>红色：&lt; 70%（需要优化）</li>
              </ul>
            </div>
            <div class="metric-item">
              <h5>错误率</h5>
              <p>监控系统错误的发生频率</p>
              <ul>
                <li>绿色：&lt; 1%（正常）</li>
                <li>黄色：1-5%（警告）</li>
                <li>红色：&gt; 5%（异常）</li>
              </ul>
            </div>
          </div>

          <h4>缓存管理</h4>
          <div class="cache-management">
            <p>系统提供了智能缓存机制，支持：</p>
            <ul>
              <li><strong>自动缓存</strong>：API响应自动缓存，减少重复请求</li>
              <li><strong>TTL管理</strong>：缓存自动过期，确保数据新鲜度</li>
              <li><strong>手动清理</strong>：支持手动清除特定缓存</li>
              <li><strong>缓存统计</strong>：实时查看缓存使用情况</li>
            </ul>
          </div>
        </div>
      </section>

      <!-- 最佳实践 -->
      <section id="best-practices" class="guide-section">
        <h3>最佳实践</h3>
        <div class="section-content">
          <div class="best-practices">
            <div class="practice-item">
              <h4>能力设计原则</h4>
              <ul>
                <li><strong>单一职责</strong>：每个能力只负责一个特定的功能</li>
                <li>
                  <strong>可复用性</strong
                  >：设计通用的能力，便于在不同场景下复用
                </li>
                <li><strong>可测试性</strong>：确保能力可以独立测试</li>
                <li><strong>文档化</strong>：为每个能力提供清晰的文档说明</li>
              </ul>
            </div>

            <div class="practice-item">
              <h4>状态机设计</h4>
              <ul>
                <li>
                  <strong>状态简化</strong>：避免过多的状态，保持状态机简洁
                </li>
                <li>
                  <strong>转换明确</strong>：每个状态转换都要有明确的触发条件
                </li>
                <li><strong>异常处理</strong>：考虑异常情况下的状态处理</li>
                <li><strong>状态验证</strong>：确保状态转换的合法性</li>
              </ul>
            </div>

            <div class="practice-item">
              <h4>性能优化</h4>
              <ul>
                <li><strong>合理缓存</strong>：对频繁访问的数据进行缓存</li>
                <li><strong>异步处理</strong>：对耗时操作使用异步处理</li>
                <li><strong>批量操作</strong>：尽量使用批量操作减少API调用</li>
                <li><strong>监控告警</strong>：设置性能监控和告警机制</li>
              </ul>
            </div>

            <div class="practice-item">
              <h4>安全考虑</h4>
              <ul>
                <li><strong>权限控制</strong>：为每个能力设置适当的权限</li>
                <li><strong>输入验证</strong>：对所有输入进行验证和过滤</li>
                <li><strong>审计日志</strong>：记录重要的操作日志</li>
                <li><strong>数据加密</strong>：对敏感数据进行加密处理</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- 常见问题 -->
      <section id="faq" class="guide-section">
        <h3>常见问题</h3>
        <div class="section-content">
          <div class="faq-list">
            <div class="faq-item">
              <h4>Q: 如何添加新的能力模板？</h4>
              <p>
                A:
                在能力管理页面，点击"添加能力"按钮，选择"自定义能力"，然后填写能力的基本信息和实现配置。
              </p>
            </div>
            <div class="faq-item">
              <h4>Q: 状态机转换失败怎么办？</h4>
              <p>
                A:
                检查前置约束是否满足，确保当前状态允许进行目标转换，查看错误日志获取详细信息。
              </p>
            </div>
            <div class="faq-item">
              <h4>Q: 如何优化API响应时间？</h4>
              <p>
                A: 使用缓存机制，优化数据库查询，使用异步处理，考虑使用CDN加速。
              </p>
            </div>
            <div class="faq-item">
              <h4>Q: 工作流设计器无法保存怎么办？</h4>
              <p>
                A:
                检查工作流是否有语法错误，确保所有节点都已正确配置，尝试刷新页面重新设计。
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 返回顶部按钮 -->
    <Button
      v-show="showBackToTop"
      @click="scrollToTop"
      type="primary"
      shape="circle"
      class="back-to-top"
    >
      <IconifyIcon icon="ant-design:up-outlined" />
    </Button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Button } from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';

// 响应式数据
const showBackToTop = ref(false);

// 方法
const scrollToSection = (sectionId: string) => {
  const element = document.getElementById(sectionId);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' });
  }
};

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

const handleScroll = () => {
  showBackToTop.value = window.scrollY > 300;
};

// 生命周期
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style lang="less" scoped>
.resource-capability-guide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  line-height: 1.6;

  .guide-header {
    text-align: center;
    margin-bottom: 48px;

    h2 {
      font-size: 32px;
      color: #1890ff;
      margin-bottom: 16px;
    }

    .guide-subtitle {
      font-size: 18px;
      color: #666;
    }
  }

  .guide-content {
    .quick-nav {
      background: #f8f9fa;
      padding: 24px;
      border-radius: 8px;
      margin-bottom: 32px;

      h3 {
        margin-bottom: 16px;
        color: #333;
      }

      .nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;

        .nav-link {
          color: #1890ff;
          text-decoration: none;
          padding: 8px 16px;
          border: 1px solid #1890ff;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            background: #1890ff;
            color: white;
          }
        }
      }
    }

    .guide-section {
      margin-bottom: 48px;

      h3 {
        font-size: 24px;
        color: #333;
        margin-bottom: 24px;
        padding-bottom: 12px;
        border-bottom: 2px solid #1890ff;
      }

      h4 {
        font-size: 20px;
        color: #333;
        margin: 24px 0 16px 0;
      }

      h5 {
        font-size: 16px;
        color: #333;
        margin: 16px 0 8px 0;
      }

      .section-content {
        p {
          margin-bottom: 16px;
          color: #666;
        }

        ul,
        ol {
          margin-bottom: 16px;
          padding-left: 24px;

          li {
            margin-bottom: 8px;
            color: #666;
          }
        }
      }
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 24px;
      margin: 24px 0;

      .feature-card {
        background: white;
        padding: 24px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        text-align: center;

        .feature-icon {
          font-size: 48px;
          color: #1890ff;
          margin-bottom: 16px;
        }

        h4 {
          margin-bottom: 12px;
          color: #333;
        }

        p {
          color: #666;
          margin: 0;
        }
      }
    }

    .concept-list {
      .concept-item {
        background: white;
        padding: 24px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 24px;

        h4 {
          color: #1890ff;
          margin-bottom: 12px;
        }

        p {
          margin-bottom: 16px;
        }

        .code-example {
          background: #f5f5f5;
          padding: 16px;
          border-radius: 4px;
          overflow-x: auto;

          pre {
            margin: 0;
            font-family: 'Courier New', monospace;
            font-size: 14px;

            code {
              color: #333;
            }
          }
        }
      }
    }

    .step-list {
      .step-item {
        display: flex;
        margin-bottom: 32px;

        .step-number {
          width: 40px;
          height: 40px;
          background: #1890ff;
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          margin-right: 24px;
          flex-shrink: 0;
        }

        .step-content {
          flex: 1;

          h4 {
            margin-bottom: 12px;
            color: #333;
          }

          p {
            margin-bottom: 16px;
          }

          .step-image {
            background: #f5f5f5;
            height: 200px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-style: italic;

            .step-placeholder {
              text-align: center;

              .ant-design-icon {
                font-size: 48px;
                color: #1890ff;
                margin-bottom: 16px;
              }

              p {
                margin: 0;
                color: #666;
                font-size: 14px;
              }
            }
          }
        }
      }
    }

    .capability-types {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin: 24px 0;

      .type-card {
        background: white;
        padding: 24px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        h5 {
          color: #1890ff;
          margin-bottom: 12px;
        }

        p {
          margin-bottom: 16px;
        }

        ul {
          margin: 0;

          li {
            margin-bottom: 4px;
          }
        }
      }
    }

    .implementation-methods {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin: 24px 0;

      .method-card {
        background: white;
        padding: 24px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        h5 {
          color: #1890ff;
          margin-bottom: 12px;
        }

        p {
          margin-bottom: 16px;
        }
      }
    }

    .node-types {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 24px;
      margin: 24px 0;

      .node-type {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        h5 {
          color: #1890ff;
          margin-bottom: 12px;
        }

        ul {
          margin: 0;

          li {
            margin-bottom: 8px;

            strong {
              color: #333;
            }
          }
        }
      }
    }

    .workflow-steps {
      background: white;
      padding: 24px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      margin: 24px 0;

      li {
        margin-bottom: 12px;
        color: #666;
      }
    }

    .rule-types {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin: 24px 0;

      .rule-type {
        background: white;
        padding: 24px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        h5 {
          color: #1890ff;
          margin-bottom: 12px;
        }

        p {
          margin-bottom: 16px;
        }
      }
    }

    .rule-config {
      background: white;
      padding: 24px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      margin: 24px 0;

      h5 {
        color: #1890ff;
        margin: 16px 0 12px 0;

        &:first-child {
          margin-top: 0;
        }
      }

      ul {
        margin-bottom: 24px;

        &:last-child {
          margin-bottom: 0;
        }

        li {
          margin-bottom: 8px;

          strong {
            color: #333;
          }
        }
      }
    }

    .monitoring-metrics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin: 24px 0;

      .metric-item {
        background: white;
        padding: 24px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        h5 {
          color: #1890ff;
          margin-bottom: 12px;
        }

        p {
          margin-bottom: 16px;
        }

        ul {
          margin: 0;

          li {
            margin-bottom: 4px;
          }
        }
      }
    }

    .cache-management {
      background: white;
      padding: 24px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      margin: 24px 0;

      p {
        margin-bottom: 16px;
      }

      ul {
        margin: 0;

        li {
          margin-bottom: 8px;

          strong {
            color: #333;
          }
        }
      }
    }

    .best-practices {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin: 24px 0;

      .practice-item {
        background: white;
        padding: 24px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        h4 {
          color: #1890ff;
          margin-bottom: 16px;
        }

        ul {
          margin: 0;

          li {
            margin-bottom: 8px;

            strong {
              color: #333;
            }
          }
        }
      }
    }

    .faq-list {
      .faq-item {
        background: white;
        padding: 24px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 16px;

        h4 {
          color: #1890ff;
          margin-bottom: 12px;
        }

        p {
          margin: 0;
          color: #666;
        }
      }
    }
  }

  .back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
  }
}
</style>
